<template>
  <div>
    <el-row class="nav">
      <el-col :span="6"
              style="overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">
        <i class="el-icon-arrow-left"
           @click="goBack"></i>
        <span :to="{ path: '/' }"></span>
        <span class="font-weight rebuild_order"
              style="width:100%"
              :to="{ path: '/' }">历史工单详情</span>
      </el-col>
    </el-row>
    <el-divider></el-divider>

    <el-row style='width:90%;margin:0 auto'>
      <el-row>
        <p class="title-txt">属性</p>
        <el-form class='attribute node'
                 label-width="97px">
          <el-form-item label="工单编号：">{{baseOrderInfo.id}}</el-form-item>
          <el-form-item label="工单状态：">已结案</el-form-item>
          <el-form-item label="创建人：">{{baseOrderInfo.userName}}</el-form-item>
          <el-form-item label="创建时间：">{{baseOrderInfo.createTimeView}}</el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <p class="title-txt">客户基本信息</p>
        <el-form class='attribute node'
                 label-width="100px">
          <el-form-item label="客户号：">{{baseOrderInfo.accountId}}</el-form-item>
          <el-form-item label="客户姓名：">{{baseOrderInfo.clientName}}</el-form-item>
          <el-form-item label="客户类别：">{{baseOrderInfo.customType}}</el-form-item>
          <el-form-item label="事件等级：">{{baseOrderInfo.eventLevel}}</el-form-item>
          <el-form-item label="联系电话：">{{baseOrderInfo.phone}}</el-form-item>
          <el-form-item label="来电号码：">{{baseOrderInfo.clientTel}}</el-form-item>
          <el-form-item label="客户性别：">{{baseOrderInfo.sex=='F'?'女':'男'}}</el-form-item>
          <el-form-item label="证件类型：">{{baseOrderInfo.cardType}}</el-form-item>
          <el-form-item label="证件号码：">{{baseOrderInfo.cardNum}}</el-form-item>
          <el-form-item label="账号：">{{baseOrderInfo.cardAccount}}</el-form-item>
          <el-form-item label="开户行：">{{baseOrderInfo.bank}}</el-form-item>
          <el-form-item label="工单分类：">{{baseOrderInfo.classify}}</el-form-item>
          <el-form-item label="交易地址：">{{baseOrderInfo.tradingAddress}}</el-form-item>
          <el-form-item label="交易金额：">{{baseOrderInfo.tradingMoney}}</el-form-item>
          <el-form-item label="交易时间：">{{baseOrderInfo.tradingTime}}</el-form-item>
          <el-form-item label="交易类型：">{{baseOrderInfo.tradingType}}</el-form-item>
          <el-form-item label="涉及机构：">{{baseOrderInfo.institution}}</el-form-item>
          <el-form-item label="是否我行ATM：">
            <el-checkbox v-model="isChecked">我行ATM</el-checkbox>
          </el-form-item>
          <el-form-item style='width:100%'
                        label="工单内容：">{{baseOrderInfo.problemDesc}}</el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <p class="title-txt">工单流转信息</p>
        <ul class="attribute node">
          <li class="per-flow-info"
              v-for="(item,index) in flowOrderInfo"
              :key="index">
            <el-row :gutter="20"
                    style='display:flex;flex:1;'>
              <el-col :span="8">客服：{{item.oaDealingPeople}}</el-col>
              <el-col :span="10">{{item.oaStep}}</el-col>
              <el-col :span="6">{{item.oaDealingtimeString}}</el-col>
            </el-row>
            <p class="problemDesc">
              {{item.oaOpinion}}
            </p>
          </li>
        </ul>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { getDetail } from '@/api/WorkOrderHistoryController'
import common from '@/common/common.js'
export default {
  inject: ['reload'], // 引入页面同步刷新的依赖
  data () {
    return {
      baseOrderInfo: '',
      flowOrderInfo: '',
      isChecked: false
    }
  },
  computed: {
  },
  watch: {

  },
  components: {
  },
  mounted () {
    this.getDetailInfo()
  },
  methods: {
    // 时间戳的转换
    timestampToTime (timestamp) {
      return common.nothmsTimestampToTime(timestamp)
    },
    // 返回上一级
    goBack () {
      this.$router.push('/orderHisoryData/4')
    },
    // 获取工单历史数据
    getDetailInfo () {
      let id = this.$store.state.historyId
      getDetail(id).then(res => {
        if (res.data.retCode === 200) {
          this.baseOrderInfo = res.data.data.WorkOrderHistoryVo
          // 1 是 0 否
          if (this.baseOrderInfo.isATM === '1') {
            this.isChecked = true
          } else {
            this.isChecked = false
          }
          this.flowOrderInfo = res.data.data.taskFormHistories
        }
      })
    }
  }
}
</script>
<style scoped>
.el-icon-arrow-left {
  font-size: 13px;
  color: #b60028;
  font-weight: 700;
  padding: 0 5px;
  cursor: pointer;
}

.attribute {
  overflow: hidden;
  padding: 20px;
}

.attribute .el-form-item {
  margin-bottom: 0;
  width: 30%;
  float: left;
}

.attribute >>> .el-form-item__label {
  white-space: nowrap;
}

.title-txt {
  color: #b60028;
  padding: 10px 0;
}

.node {
  background: #f8f9fd;
}

.node li {
  padding: 10px;
}

.node li:not(:last-child) {
  border-bottom: 1px solid gainsboro;
}

.problemDesc {
  padding: 10px 0 0 0;
  overflow: hidden;
  white-space: wrap;
}
</style>
